<template>
  <div class="consensus-activity-user">
    <c-title text="有效用户"></c-title>
    <p class="head">有效用户：{{ count }}</p>
    <div class="main"  v-if="list&&list.length!==0">
      <div class="content" v-for="item in list" :key="item.uid">
        <van-image width="1.75rem" height="1.75rem" round :src="item.avatar_image" />
        <span class="nick-name">{{item.nickname}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from 'vant';
import { scrollMixin } from "../../utils/mixin";
export default {
  components: { VanImage },
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      total_page: 1,
      count:0,
      isLoadMore: true,
      page: 1,
    };
  },
   activated() {
    this.getData();
  },
  methods: {
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },
    getData(page=1) {
      $http.get("plugin.wise-yuan-trade.frontend.my.valid-user", {page}, "").then(res => {
      this.isLoadMore = true;
        if (res.result) {
          let data = res.data;
          (page==1)?(this.list = data.list):(this.list=this.list.concat(data.list));
          this.count=data.count;
          this.total_page = data.last_page;
          this.page = data.current_page;
        } else {
          this.$toast(res.msg);
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.consensus-activity-user {
  padding: 0.625rem 0.75rem;

  .content {
    display: flex;
    align-items: center;
    margin-bottom: 0.9375rem;
  }

  .nick-name {
    margin-left: 0.4375rem;
  }

  .main {
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.75rem;
    margin-top: 0.625rem;
  }

  .head {
    padding: 1.0938rem 0.75rem;
    background: #fff;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
  }
}
</style>
